$(function(){
	
	function E (el) {
		var a = document.querySelectorAll(el);
		if(a.length > 1) {
		return a;
		} else {
			return a[0];
		}
	};	
	 var W = Number( $(".line>li").width()*7)  
	 var M = E("#mybox>ul").offsetLeft
//导航拖拽开始
		var lastX = 0,
			ood = 0,
			odl =  E("#mybox>ul").offsetLeft;
	
	E("#mybox").addEventListener("touchstart", function(e) {
			lastX = 0;
			ood = e.touches[0].clientX;
		}, false);
		
		E("#mybox").addEventListener("touchmove", function(e) {
			
			lastX = e.touches[0].clientX;		
			ab = lastX - ood ;
			
			E("#mybox>ul").style.left = ab + odl +"px"
			if(E("#mybox>ul").offsetLeft > 0) {
				E("#mybox>ul").style.left = 0
				odl = 0
			}
		if( E("#mybox>ul").offsetLeft < -W ) {
				E("#mybox>ul").style.left = -W +"px"
				odl = -W 
			}
			if(E("#mybox>ul").offsetLeft < -(E("#mybox>ul").offsetWidth - E(".lists").offsetWidth - 4)) {
				E("#mybox>ul").style.left = -(E("#mybox>ul").offsetWidth - E(".lists").offsetWidth - 4) + 'px'
				odl = -(E("#mybox>ul").offsetWidth - E(".lists").offsetWidth - 4)	
			}
		}, false);
		
		E("#mybox").addEventListener("touchend", function(e) {
				odl = E("#mybox>ul").offsetLeft;
		}, false);
		
		/*li点击*/
							$(".line>li>div").click(function() {
								for(var i=0;i<$(".line>li").length;i++)
									{
										$(".line>li").eq(i).find("div").css({"color":"#4B4B4B","font-size":"1.6rem"})
									}
									$(this).css({"color":"#C20F08","font-size":"1.75rem"})
							})
							

			$(".line>li>div").on("click",function(){
					 location.reload()
			})


})